```html
<script setup>
  import * as bottomSheet from "@zag-js/bottom-sheet"
  import { useMachine, normalizeProps } from "@zag-js/vue"
  import { useId, computed } from "vue"

  const service = useMachine(bottomSheet.machine, { id: useId() })

  const api = computed(() => bottomSheet.connect(service, normalizeProps))
</script>
<template>
  <div>
    <button v-bind="api.getTriggerProps()">Open Bottom Sheet</button>
    <div v-bind="api.getBackdropProps()" />
    <div v-bind="api.getContentProps()">
      <div v-bind="api.getGrabberProps()">
        <div v-bind="api.getGrabberIndicatorProps()" />
      </div>
      <div>
        <div v-bind="api.getTitleProps()">Add New Contact</div>
        <label>
          <span>Name</span>
          <input type="text" />
        </label>
        <label>
          <span>Email</span>
          <input type="email" />
        </label>
        <div>
          <button>Add Contact</button>
          <button @click="api.setOpen(false)">Cancel</button>
        </div>
      </div>
    </div>
  </div>
</template>
```
